import React, { Suspense } from 'react';
import { Route, useHistory } from 'react-router-dom';
import { getComponent, getAuthority } from '@/utils/gloabl';
import { Layout, Skeleton } from 'antd';
import BaseHeader from './BaseHeader';
import BaseNav from './BaseNav';
import BaseMenu from './BaseMenu';
import BaseSetting from '@/layouts/BaseSetting';
import { useSelector } from 'react-redux';
import './index.less';

const { Content } = Layout;
const loading = <Skeleton active />;
const BasicLayout = (props: any) => {
  const history = useHistory();
  const { pathname } = props.location;
  const { menus } = useSelector((state: any) => ({
    token: state.counter.token,
    menus: state.counter.menus,
  }));

  /*
   * 没有页面权限的情况下
   * */
  if (!getAuthority(menus, pathname) && pathname != '/401' && pathname != '/login') {
    history.push('/401');
  }
  return (
    <Layout>
      <BaseMenu />
      <Layout className="site-layout">
        <BaseHeader />
        <BaseNav />
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Suspense fallback={loading}>
            <Route component={getComponent(pathname)} path={pathname} />
          </Suspense>
        </Content>
        <BaseSetting />
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
